<!DOCTYPE html>
<html>
  <head>
    <style>
      /* body {
        background: url("http://pic.58pic.com/58pic/13/17/92/22P58PICYyR_1024.jpg")
          center center / cover no-repeat fixed;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      } */

      .content {
        height: 400px;
        width: 600px;
        word-break: break-all;
        z-index: 10;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -300px;
        overflow: hidden;
      }

      /* .content:before {
        content: "";
        background: url("http://pic.58pic.com/58pic/13/17/92/22P58PICYyR_1024.jpg")
          center center / cover no-repeat fixed;
        filter: blur(20px);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        margin: -30px;
      } */

      .info {
        padding: 40px;
        color: #000;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="info">
        zxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXc
        zxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZX
        cZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczx
        cZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxc
        zxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXc
      </div>
    </div>
    <script>
      function debounce(fn, delay){
        let timer = null;
        return function(...args){
          if(timer){
            clearTimeout(timer);
          }
          timer = setTimeout(() => fn(...args), delay);
        }
      }
      function throttle(fn, delay){
        let valid = true;
        return function(...args){
          if(!valid){
            return false;
          }
          valid = false;
          setTimeout(() => {
            valid = true;
            fn(...args);
          }, delay);
        }
      }
      function showTop(){
        let scrollTop = document.body.scrollTop || 
        document.documentElement.scrollTop;
        console.log('距离顶部' + "：", scrollTop);
      }
      document.body.onscroll = debounce(showTop, 1000);
      // window.addEventListener('scroll', debounce(showTop, 1000));
      // window.addEventListener('scroll', throttle(showTop, 1000));
    </script>
  </body>
</html>
